"use client"

import { useState } from "react"
import { ArrowLeft, Bell, Lock, Eye, Globe, Smartphone, Moon, Sun, LogOut } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Switch } from "@/components/ui/switch"
import { Separator } from "@/components/ui/separator"
import { useAuth } from "@/lib/auth"
import { useRouter } from "next/navigation"

export default function SettingsPage() {
  const [darkMode, setDarkMode] = useState(false)
  const [notifications, setNotifications] = useState({
    likes: true,
    comments: true,
    follows: true,
    messages: true,
    posts: false,
  })
  const [privacy, setPrivacy] = useState({
    profilePublic: true,
    showLocation: false,
    allowTagging: true,
    showOnlineStatus: true,
  })

  const { logout } = useAuth()
  const router = useRouter()

  const handleLogout = () => {
    logout()
    router.push("/login")
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-white border-b border-gray-200 sticky top-0 z-40">
        <div className="max-w-md mx-auto px-4 py-3">
          <div className="flex items-center space-x-3">
            <Button variant="ghost" size="sm" onClick={() => router.back()}>
              <ArrowLeft size={20} />
            </Button>
            <h1 className="text-xl font-bold text-gray-900">Settings</h1>
          </div>
        </div>
      </div>

      <div className="max-w-md mx-auto px-4 py-4 space-y-4">
        {/* Notifications */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Bell size={20} />
              <span>Notifications</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between">
              <span>Likes</span>
              <Switch
                checked={notifications.likes}
                onCheckedChange={(checked) => setNotifications((prev) => ({ ...prev, likes: checked }))}
              />
            </div>
            <div className="flex items-center justify-between">
              <span>Comments</span>
              <Switch
                checked={notifications.comments}
                onCheckedChange={(checked) => setNotifications((prev) => ({ ...prev, comments: checked }))}
              />
            </div>
            <div className="flex items-center justify-between">
              <span>New Followers</span>
              <Switch
                checked={notifications.follows}
                onCheckedChange={(checked) => setNotifications((prev) => ({ ...prev, follows: checked }))}
              />
            </div>
            <div className="flex items-center justify-between">
              <span>Messages</span>
              <Switch
                checked={notifications.messages}
                onCheckedChange={(checked) => setNotifications((prev) => ({ ...prev, messages: checked }))}
              />
            </div>
            <div className="flex items-center justify-between">
              <span>Post Updates</span>
              <Switch
                checked={notifications.posts}
                onCheckedChange={(checked) => setNotifications((prev) => ({ ...prev, posts: checked }))}
              />
            </div>
          </CardContent>
        </Card>

        {/* Privacy & Security */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Lock size={20} />
              <span>Privacy & Security</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between">
              <div>
                <div className="font-medium">Public Profile</div>
                <div className="text-sm text-gray-500">Anyone can see your profile</div>
              </div>
              <Switch
                checked={privacy.profilePublic}
                onCheckedChange={(checked) => setPrivacy((prev) => ({ ...prev, profilePublic: checked }))}
              />
            </div>
            <div className="flex items-center justify-between">
              <div>
                <div className="font-medium">Show Location</div>
                <div className="text-sm text-gray-500">Display your location in posts</div>
              </div>
              <Switch
                checked={privacy.showLocation}
                onCheckedChange={(checked) => setPrivacy((prev) => ({ ...prev, showLocation: checked }))}
              />
            </div>
            <div className="flex items-center justify-between">
              <div>
                <div className="font-medium">Allow Tagging</div>
                <div className="text-sm text-gray-500">Others can tag you in posts</div>
              </div>
              <Switch
                checked={privacy.allowTagging}
                onCheckedChange={(checked) => setPrivacy((prev) => ({ ...prev, allowTagging: checked }))}
              />
            </div>
            <div className="flex items-center justify-between">
              <div>
                <div className="font-medium">Online Status</div>
                <div className="text-sm text-gray-500">Show when you're active</div>
              </div>
              <Switch
                checked={privacy.showOnlineStatus}
                onCheckedChange={(checked) => setPrivacy((prev) => ({ ...prev, showOnlineStatus: checked }))}
              />
            </div>
          </CardContent>
        </Card>

        {/* Appearance */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Eye size={20} />
              <span>Appearance</span>
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                {darkMode ? <Moon size={16} /> : <Sun size={16} />}
                <span>Dark Mode</span>
              </div>
              <Switch checked={darkMode} onCheckedChange={setDarkMode} />
            </div>
          </CardContent>
        </Card>

        {/* Account Actions */}
        <Card>
          <CardContent className="pt-6 space-y-3">
            <Button variant="outline" className="w-full justify-start">
              <Globe size={16} className="mr-2" />
              Language & Region
            </Button>
            <Button variant="outline" className="w-full justify-start">
              <Smartphone size={16} className="mr-2" />
              Data & Storage
            </Button>
            <Button variant="outline" className="w-full justify-start">
              <Lock size={16} className="mr-2" />
              Two-Factor Authentication
            </Button>

            <Separator />

            <Button variant="destructive" className="w-full justify-start" onClick={handleLogout}>
              <LogOut size={16} className="mr-2" />
              Sign Out
            </Button>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
